<template>
  <view class="index">
    <home-swiper :banners="indexStore.banners" @click="handleBannerClick" />
    <view class="index-content container">
      <view class="index-title">
        <text class="text-primary">Taro Vue3 示例项目</text>
      </view>
      <view class="index-env">
        <text class="text-white">当前环境: {{ env }}</text>
        <text>版本: {{ version }}</text>
      </view>
      <view class="index-buttons flex-center">
        <ui-button type="primary" @click="handlePrimaryClick">主要按钮</ui-button>
        <ui-button type="success" plain @click="handleSuccessClick">成功按钮</ui-button>
        <nut-button type="primary" @click="handleOpenRouter">打开路由</nut-button>
      </view>
      <view class="index-loading flex-center" v-if="indexStore.loading">
        <loading text="加载中..." />
      </view>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  name: 'HomePage'
}
</script>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { formatDate } from '@/utils';
import { APP_ENV, APP_VERSION, API_BASE_URL, API_TIMEOUT } from '@/config';
import UiButton from '@/components/ui/Button.vue';
import Loading from '@/components/common/Loading.vue';
import HomeSwiper from './components/HomeSwiper.vue';
import { useIndexStore } from './store';
import type { Banner } from './services/banner';
import { navigateTo } from '@/utils/router';
console.log(APP_ENV, APP_VERSION, API_BASE_URL, API_TIMEOUT);

// 使用环境变量
const env = ref(APP_ENV);
const version = ref(APP_VERSION);

// 使用 pinia store
const indexStore = useIndexStore();

// 格式化当前日期
const currentDate = ref(formatDate(new Date()));

// 初始化数据
onMounted(() => {
  indexStore.getBanners();
});

// 页面卸载时重置状态
onUnmounted(() => {
  indexStore.resetState();
});

// Banner点击事件
const handleBannerClick = (banner: Banner) => {
  console.log('Banner clicked:', banner);
};

// 主要按钮点击事件
const handlePrimaryClick = () => {
  console.log('Primary button clicked at:', currentDate.value);
};

// 成功按钮点击事件
const handleSuccessClick = () => {
  console.log('Success button clicked');
};

// 打开路由
const handleOpenRouter = () => {
  console.log('Open router');
  navigateTo({
    url: '/pages/demo/demo1/index',
  });
};
</script>

<style lang="scss">
.index {
  min-height: 100vh;
  background-color: #f5f5f5;

  &-content {
    padding: 20px;
  }

  &-title {
    font-size: var(--font-size-large);
    font-weight: bold;
    margin: 30px 0;
    text-align: center;
  }

  &-env {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    font-size: 28px;
    color: #666;
  }

  &-buttons {
    gap: 20px;
    margin: 30px 0;
  }

  &-loading {
    margin: 50px 0;
  }
}
</style>
